<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
</head>
<style>
    .pwd {
        width: 140px;
        margin-right: 4px;
    }

    .btn {
        cursor: pointer;
        user-select: none;
    }
</style>
<body>
<!--
    v-html="html代码"
    {{普通文本}}            v-text:"普通文本"
    :属性名="属性值"                    v-bind:属性名:"属性值"
    @事件名 v-on:"js代码"           v-on:事件名="js代码"
    vue的指令无非是针对html文档中的属性，标签文本，属性，事件，样式和数据进行操作和页面控制
    pwd_type = (pwd_type==='password' ? 'text':'password')
-->
<div id="app">
    密码：<input :type="pwd_type" class="pwd" v-model="password">
    <span class="btn" @click="pwd_type = (pwd_type==='password' ? 'text':'password')">眼睛</span>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                pwd_type: "password"
            }
        }
    }).mount("#app")
</script>
</body>
</html>